import 'package:blurb/common/values/images.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:google_fonts/google_fonts.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage(MIP.background),
            fit: BoxFit.cover,
          ),
        ),
        child: SafeArea(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 15.w),
            child: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  // 顶部标题
                  Padding(
                    padding: EdgeInsets.only(top: 10.h),
                    child: Text(
                      'Sun protection',
                      style: GoogleFonts.racingSansOne(
                        color: Colors.white,
                        fontSize: 24.sp,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),

                  SizedBox(height: 15.h),

                  Stack(
                    clipBehavior: Clip.none,
                    children: [
                      // 蓝色底层
                      Container(
                        height: 104.h,
                        decoration: BoxDecoration(
                          color: const Color(0xFF60C3FF),
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(14.r),
                            topRight: Radius.circular(14.r),
                          ),
                        ),
                      ),
                      // 黑色上层
                      Positioned(
                        top: 2.h,
                        left: 0,
                        right: 0,
                        height: 102.h,
                        child: Container(
                          decoration: BoxDecoration(
                            color: Colors.black,
                            borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(12.r),
                              topRight: Radius.circular(12.r),
                            ),
                          ),
                          child: Container(
                            padding: EdgeInsets.only(
                              left: 15.w,
                              right: 22.w,
                              top: 10.h,
                            ),
                            decoration: BoxDecoration(
                              color: const Color(0xFF1E1E1E),
                              borderRadius: BorderRadius.circular(12.r),
                              border: Border.all(
                                color: const Color(0xFF60C3FF).withOpacity(0.3),
                                width: 1,
                              ),
                            ),
                            child: Column(
                              children: [
                                // 问候语
                                Row(
                                  children: [
                                    Text(
                                      'Good evening',
                                      style: GoogleFonts.racingSansOne(
                                        color: Colors.white,
                                        fontSize: 20.sp,
                                        fontWeight: FontWeight.normal,
                                      ),
                                    ),
                                  ],
                                ),

                                SizedBox(height: 10.h),

                                // 搜索框和温度
                                Row(
                                  children: [
                                    // 搜索框
                                    Expanded(
                                      child: Container(
                                        padding: EdgeInsets.symmetric(
                                          horizontal: 15.w,
                                          vertical: 8.h,
                                        ),
                                        decoration: BoxDecoration(
                                          color: Colors.grey.withOpacity(0.2),
                                          borderRadius: BorderRadius.circular(
                                            18.r,
                                          ),
                                        ),
                                        child: Row(
                                          children: [
                                            Text(
                                              'Sun protection related',
                                              style: GoogleFonts.inter(
                                                color: Colors.grey,
                                                fontSize: 12.sp,
                                              ),
                                            ),
                                            const Spacer(),
                                            Icon(
                                              Icons.search,
                                              color: Colors.grey,
                                              size: 20.w,
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),

                                    SizedBox(width: 20.w),

                                    // 温度显示
                                    Text(
                                      '24°C',
                                      style: GoogleFonts.racingSansOne(
                                        color: Colors.white,
                                        fontSize: 25.sp,
                                        fontWeight: FontWeight.normal,
                                      ),
                                    ),
                                  ],
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),

                      // 天气图标 - 右上角超出
                      Positioned(
                        top: -40.h,
                        right: 15.w,
                        child: Image.asset(
                          MIP.sunny,
                          width: 90.w,
                          height: 90.h,
                        ),
                      ),
                    ],
                  ),

                  SizedBox(height: 20.h),
                  // 日期选择器
                  SizedBox(
                    height: 60.h,
                    child: ListView.builder(
                      scrollDirection: Axis.horizontal,
                      itemCount: 7,
                      itemBuilder: (context, index) {
                        bool isSelected = index == 2;
                        return Container(
                          width: 50.w,
                          margin: EdgeInsets.only(right: 10.w),
                          decoration: BoxDecoration(
                            color: isSelected
                                ? null
                                : Colors.grey.withOpacity(0.2),
                            gradient: isSelected
                                ? LinearGradient(
                                    begin: const Alignment(0.50, 0.00),
                                    end: const Alignment(0.50, 0.96),
                                    colors: const [
                                      Color(0xFF60C3FF),
                                      Color(0xFFAADEFC),
                                    ],
                                  )
                                : null,
                            borderRadius: BorderRadius.circular(12.r),
                          ),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text(
                                '${18 + index}',
                                style: GoogleFonts.racingSansOne(
                                  color: isSelected
                                      ? Colors.white
                                      : Colors.grey,
                                  fontSize: 16.sp,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              SizedBox(height: 5.h),
                              Text(
                                'Wed',
                                style: GoogleFonts.racingSansOne(
                                  color: isSelected
                                      ? Colors.white
                                      : Colors.grey,
                                  fontSize: 12.sp,
                                ),
                              ),
                            ],
                          ),
                        );
                      },
                    ),
                  ),

                  SizedBox(height: 20.h),

                  // 签到卡片
                  Container(
                    height: 320.h,
                    width: double.infinity,
                    padding: EdgeInsets.all(20.w),
                    decoration: BoxDecoration(
                      color: const Color(0xFF1E1E1E),
                      borderRadius: BorderRadius.circular(20.r),
                    ),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset(MIP.empty, width: 85.w, height: 80.h),

                        SizedBox(height: 15.h),

                        // 签到文本
                        Text(
                          'I didn\'t check in today, go sign in',
                          style: GoogleFonts.inter(
                            color: Colors.white,
                            fontSize: 14.sp,
                          ),
                        ),
                        Text(
                          'and get the attention.',
                          style: GoogleFonts.inter(
                            color: Colors.white,
                            fontSize: 14.sp,
                          ),
                        ),

                        SizedBox(height: 15.h),

                        // 签到按钮
                        Container(
                          width: 120.w,
                          height: 40.h,
                          decoration: BoxDecoration(
                            gradient: LinearGradient(
                              begin: Alignment(0.50, 0.00),
                              end: Alignment(0.50, 0.96),
                              colors: [
                                const Color(0xFF60C3FF),
                                const Color(0xFFAADEFC),
                              ],
                            ),
                            borderRadius: BorderRadius.circular(20.r),
                          ),
                          child: Center(
                            child: Text(
                              'Check-In',
                              style: GoogleFonts.racingSansOne(
                                color: Colors.white,
                                fontSize: 16.sp,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),

                  SizedBox(height: 20.h),

                  // Sun protection tips 部分
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        'Sun protection tips',
                        style: GoogleFonts.racingSansOne(
                          color: Colors.white,
                          fontSize: 22.sp,
                          fontWeight: FontWeight.normal,
                        ),
                      ),

                      Text(
                        'View All',
                        style: GoogleFonts.racingSansOne(
                          color: Colors.white,
                          fontSize: 14.sp,
                          fontWeight: FontWeight.normal,
                          decoration: TextDecoration.underline,
                          decorationColor: Colors.white,
                          decorationThickness: 2,
                        ),
                      ),
                    ],
                  ),

                  SizedBox(height: 20.h),

                  // 卡片部分
                  Row(
                    children: [
                      // 第一个卡片
                      Expanded(
                        child: Stack(
                          clipBehavior: Clip.none,
                          children: [
                            // 卡片主体
                            Container(
                              padding: EdgeInsets.all(15.w),
                              height: 160.h,
                              decoration: BoxDecoration(
                                color: const Color(0xFF1E1E1E),
                                borderRadius: BorderRadius.circular(15.r),
                                border: Border.all(
                                  color: const Color(
                                    0xFF60C3FF,
                                  ).withOpacity(0.3),
                                  width: 1,
                                ),
                              ),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  // 顶部空间
                                  SizedBox(height: 25.h),

                                  // 头像和标题在同一行
                                  Row(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.center,
                                    children: [
                                      // 用户头像
                                      ClipRRect(
                                        borderRadius: BorderRadius.circular(
                                          25.r,
                                        ),
                                        child: Image.asset(
                                          MIP.avatar,
                                          width: 38.w,
                                          height: 38.h,
                                        ),
                                      ),

                                      SizedBox(width: 10.w),

                                      // 标题
                                      Expanded(
                                        child: Text(
                                          'Common sun protection ......',
                                          style: GoogleFonts.racingSansOne(
                                            color: Colors.white,
                                            fontSize: 17.sp,
                                            height: 1.h,
                                          ),
                                          maxLines: 2,
                                          overflow: TextOverflow.ellipsis,
                                        ),
                                      ),
                                    ],
                                  ),

                                  SizedBox(height: 12.h),

                                  // 描述文本
                                  Text(
                                    'Can be divided into physical sunscreen and chemical ......',
                                    style: GoogleFonts.inter(
                                      color: Colors.grey,
                                      fontSize: 12.sp,
                                    ),
                                    maxLines: 2,
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ],
                              ),
                            ),

                            // 右上角箭头图标
                            Positioned(
                              top: 10.h,
                              right: 12.w,
                              child: Image.asset(
                                MIP.rightArrowBlue,
                                width: 24.w,
                                height: 24.h,
                              ),
                            ),

                            // 左上角收藏图标
                            Positioned(
                              top: -18.h,
                              left: 15.w,
                              child: Stack(
                                alignment: Alignment.center,
                                children: [
                                  // 背景图
                                  Image.asset(
                                    MIP.collectionBackground,
                                    width: 50.w,
                                    height: 50.h,
                                  ),
                                  // 收藏图标 (第一个卡片用空心图标)
                                  Image.asset(
                                    MIP.collectionBorder,
                                    width: 24.w,
                                    height: 24.h,
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),

                      SizedBox(width: 15.w),

                      // 第二个卡片
                      Expanded(
                        child: Stack(
                          clipBehavior: Clip.none,
                          children: [
                            // 卡片主体
                            Container(
                              padding: EdgeInsets.all(15.w),
                              height: 160.h,
                              decoration: BoxDecoration(
                                color: const Color(0xFF1E1E1E),
                                borderRadius: BorderRadius.circular(15.r),
                                border: Border.all(
                                  color: const Color(
                                    0xFF60C3FF,
                                  ).withOpacity(0.3),
                                  width: 1,
                                ),
                              ),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  SizedBox(height: 25.h),
                                  Row(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.center,
                                    children: [
                                      // 用户头像
                                      ClipRRect(
                                        borderRadius: BorderRadius.circular(
                                          25.r,
                                        ),
                                        child: Image.asset(
                                          MIP.avatar,
                                          width: 38.w,
                                          height: 38.h,
                                        ),
                                      ),

                                      SizedBox(width: 10.w),

                                      // 标题
                                      Expanded(
                                        child: Text(
                                          'Common sun protection ......',
                                          style: GoogleFonts.racingSansOne(
                                            color: Colors.white,
                                            fontSize: 17.sp,
                                            height: 1.h,
                                          ),
                                          maxLines: 2,
                                          overflow: TextOverflow.ellipsis,
                                        ),
                                      ),
                                    ],
                                  ),

                                  SizedBox(height: 12.h),

                                  // 描述文本
                                  Text(
                                    'Can be divided into physical sunscreen and chemical ......',
                                    style: GoogleFonts.inter(
                                      color: Colors.grey,
                                      fontSize: 12.sp,
                                    ),
                                    maxLines: 2,
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ],
                              ),
                            ),

                            // 右上角箭头图标
                            Positioned(
                              top: 10.h,
                              right: 12.w,
                              child: Image.asset(
                                MIP.rightArrowBlue,
                                width: 24.w,
                                height: 24.h,
                              ),
                            ),

                            // 左上角收藏图标
                            Positioned(
                              top: -18.h,
                              left: 15.w,
                              child: Stack(
                                alignment: Alignment.center,
                                children: [
                                  Image.asset(
                                    MIP.collectionBackground,
                                    width: 50.w,
                                    height: 50.h,
                                  ),
                                  Image.asset(
                                    MIP.collectionBorder,
                                    width: 24.w,
                                    height: 24.h,
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                  // 底部留白
                  SizedBox(height: 70.h),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}
